const pic = document.querySelector('#pic');
const img = document.querySelectorAll('#pic img');

let lastIndex = [].indexOf.call(pic.children,document.querySelector('.now'));;

function mid(){
    let oWid = window.innerWidth;
    document.querySelector('.now').style.left = oWid/2-150+'px';
    for(let i=0;i<img.length;i++){
        img[i].style.left = oWid/2 -150-100*(lastIndex-i) + 'px';
    }
    return mid;
}


pic.onclick = function(e){
    let index = [].indexOf.call(pic.children,e.target);
    img[index].className = 'now';
    for(let i=0;i<index;i++){
        img[i].className = 'left';
    }
    for(let i=index+1;i<img.length;i++){
        img[i].className = 'right';
    }
    lastIndex = index;
    mid();
}

window.onresize = mid();